﻿<%- include('../../shared/includes/head',{ pageTitle: 'Your Cart' }) %>
<link rel="stylesheet"
      href="/styles/cart.css">
<script src="/scripts/cart-item-management.js"
        defer></script>
</head>

<body>
<%- include('../../shared/includes/header') %>
<main>
    <h1>Your Cart</h1>
    <ul id="cart-items">
        <% for(const cartItem of locals.cart.items) { %>
            <li>
                <%- include('includes/cart-item',{ item:cartItem }) %>
            </li>
        <% } %>
    </ul>
    <div id="cart-total">
        <p>
            Total:$ <span
                    class="cart-total-price"><%= locals.cart.totalPrice.toFixed(2) %></span>
        </p>

        <% if(locals.isAuth){ %>
            <form action="/orders" method="POST">
                <input type="hidden" name="_csrf"
                       value="<%= locals.csrfToken %>">
                <button class="btn">Buy Products
                </button>
            </form>
        <% }else{ %>
            <p id="cart-total-fallback">Log in to
                proceed and purchase the
                items.</p>
        <% } %>

    </div>
</main>

<%- include('../../shared/includes/footer') %>